<template>
	<scroll-view scroll-y class="test-multiple-choice">
		<!-- v-if="data.type=='单选题'" -->
		<view v-if="data.type=='单选题' || data.type=='多选题'" class="test-centet" >
			<view class="test-heard">
				<view style="float: left;">
				<view class="heard-index">
					{{index+1}} / {{lengths}} ({{data.type}})
				</view>
				<view class="header-title">
					{{data.title}}
				</view>
					
				</view>
			</view>
			<view class="test-body">
				<!-- #ifndef MP-WEIXIN -->
				<mp-html container-style="" markdown :content="data.center" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo"
				 lazy-load scroll-table selectable use-anchor show-with-animation></mp-html>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN-->
				<uPase :content="data.center" :noData="noData"></uPase>
				<!-- #endif -->
			</view>
			<view class="daan-conten">
				<view class="daan-conten_item" v-for="(item, i) in data.answers" :style="styles[i] || ''"  @click="selectDaan(i)">
					<view class="cdata-index">
						{{i+1 + '、'}} 
					</view>
					<view class="data-cengnas">
						{{item}}
					</view>
				</view>
				<view  v-if="data.type !=='单选题'" @click="readset"  class="daancenenr-but">
				  确定选择
				</view>
			</view>
			<view class="zuihou-daan" v-if="isdaab">
				<view class="daana">
					答案：
					<view class="daanspan">
						{{data.rightAnswer}}
					</view>
				</view>
				<view @click="isShoe=true" class="danbut">
					详细解释
				</view>
			</view>
			<view class="xiangjie" v-if="isShoe">
				<view class="title">
					知识详情
				</view>
				<view class="test-body">
					<!-- #ifndef MP-WEIXIN -->
					<mp-html container-style="" markdown :content="data.analysis" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo"
					 lazy-load scroll-table selectable use-anchor show-with-animation></mp-html>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN-->
					<uPase :content="data.analysis" :noData="noData"></uPase>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view v-else class="test-centet">
			<view class="test-heard">
				<view style="float: left;">
					<view class="heard-index">
						{{index+1}} / {{lengths}} (简答题)
					</view>
					<view class="header-title">
						{{data.title}}
					</view>
				</view>
			</view>
			<view width="100%" class="daan-conten">
			    <textarea value="" placeholder="请输入答案"  rows="2"/>
			</view>
			<view class="zuihou-daan" >
				<view @click="isShoe=true" class="danbut">
					详细解释
				</view>
			</view>
			<view class="xiangjie" v-if="isShoe">
				<view class="title">
					知识详情
				</view>
				<view class="test-body">
					<!-- #ifndef MP-WEIXIN -->
					<mp-html container-style="" markdown :content="data.content" domain="https://6874-html-foe72-1259071903.tcb.qcloud.la/demo"
					 lazy-load scroll-table selectable use-anchor show-with-animation></mp-html>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN-->
					<uPase :content="data.content" :noData="noData"></uPase>
					<!-- #endif -->
				</view>
			</view>
			
		</view>
	</scroll-view>
</template>

<script>
	import uPase from '@/components/gaoyia-parse/parse.vue'
	import marked from 'marked'
	export default {
		props: {
			data: {
				type: Object,
				default () {
					return {}
				}
			},
			index: {
				type: Number,
				default: 0,
			},
			lengths:{
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				isright:false,
				actindex:null,
				duoxuan:true,
				styles:[],
				isClick:true,
				rgba:'rgba(85, 255, 127, 0.8)',
				noData: '请稍等！',
				isShoe: false,
				isdaab: false,
				value: 0,
				viewId: 'id_0',
				active: null,
				activeIndex: 0,

			};
		},
		components: {
			uPase,
		},
		methods: {
			selectDaan(i) {
				// 如果单选题
				if(this.data.type=='单选题'){
					if(!this.isClick) return false;  // 点击一次之后就不让点了
					// 将控件冻结，不让再点击
					this.isClick = false
						this.actindex = i;
					// console.log(i , this.data.rightAnswer);
					if((i+1) == this.data.rightAnswer){
						this.isright = true
						this.styles[i] = 'color:rgba(0, 170, 0, 1.0)'
						this.rgba ='rgba(0, 170, 0, 1.0)'
						this.$emit("setBag",true)
						let timeID = setTimeout(()=>{
							this.$emit('netchangePage')
							clearTimeout(timeID) 
							timeID=null
						},500)
					
					}  else {
						this.isright = false
						this.styles[i] = 'color:rgba(255, 0, 0, 1)'
						this.rgba ='rgba(255, 0, 0, 1)'
						this.isShoe = true
						this.$emit("setBag",false)
					}
					this.isdaab = true
				} else if (this.data.type=='多选题'){
					if(!this.isClick) return false;  
					console.log(this.data.rightAnswer.indexOf((i+1)));
					if(this.data.rightAnswer.indexOf((i+1))>-1){
						this.styles[i] ='color:rgba(0, 170, 0, 1.0)'
						//   设置的数据，   数据的哪一项， 需要改变成的数据
						this.$set(this.styles, i, 'color:rgba(0, 170, 0, 1.0)')
						// this.rgba ='rgba(0, 170, 0, 1.0)'
						// this.$emit("setBag",true)
					} else {
						this.duoxuan=false
						// this.$emit("setBag",false)
						this.styles[i] = 'color:rgba(255, 0, 0, 1)'
						//   设置的数据，   数据的哪一项， 需要改变成的数据
						this.$set(this.styles, i, 'color:rgba(255, 0, 0, 1)')
					}
					
				}
				
					this.active = i
					console.log(this.active , i);
					this.actindex = null;
			},
			readset(){
				this.isdaab = true
				// 将控件冻结，不让再点击
				this.isClick = false
				// if(this.duoxuan) this.$emit('netchangePage')
				this.$emit("setBag",this.duoxuan)
			}
		}
	}
</script>

<style scoped lang="scss">
	.test-multiple-choice {
		// display: flex;
		// flex-direction: column;
		box-sizing: border-box;
		// box-sizing: border-box;
		width: 100%;
		height: 100%;

		.xiangjie {
			background-color: #fff;
			// height: 100%;
			width: 100%;
			margin-top: 30px;
			padding: 5px;
			box-sizing: border-box;
			.title {
				font-size: 16px;
				text-align: center;
				font-weight: bold;
			}
		}

		.zuihou-daan {
			margin-top: 30px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 15px;
			background-color: #fff;
			border-radius: 3px;

			.daana {
				font-weight: bold;
				display: flex;
				align-items: center;
				color: #333;
			}

			.danbut {
				font-size: 12px;
				border-radius: 13px;
				background-color: $my-bg-color;
				padding: 5px 10px;
				color: #fff;
			}
		}

		.test-centet {
			margin: 0 10px;
			box-sizing: border-box;
			height: 100%;

			.test-body {
				padding: 10px 0;
				// border-top: 1px solid #ccc;
				// border-bottom: 1px solid #ccc;
			}

			.test-heard {
				display: flex;
				align-items: center;
				margin: 5px 0;

				.heard-index {
					color: $uni-color-primary;
					margin-right: 5px;
				}

				.header-title {
					color: #888;
				}
			}
		}

		.classify-swipe {
			height: 100%;

		}

		.swiper-item {
			height: 100%;
		}

		.test-tab-box {
			display: flex;
			flex: 1;
			margin-right: 5px;
			margin-top: 5px;
			justify-content: space-around;
			box-sizing: border-box;

			.test-tab {
				// background-color: #007AFF;
				min-width: 30px;
				color: #666;
				border: 1px solid #ddd;
				border-radius: 5px;
				flex: 1;
				margin-left: 5px;
				text-align: center;

				box-sizing: border-box;
			}
		}

		.activedaan {
			background-color: rgba(0, 0, 0, 0.1);
		}

		.daan-conten {
			display: flex;
			flex-direction: column;
			color: #333;
			
			box-sizing: border-box;
			textarea{
			box-sizing: border-box;
				width: 100%;
				border: 1px solid #ddd;
				border-radius: 5px;
				height: 100px;
				padding: 10px;
				background: #ccc;
			}
			.daancenenr-but{
				padding: 5px 10px;
				background: $my-bg-color;
				width: 80px;
				margin: 30px auto 0;
				color: #fff;
				text-align: center;
			}
			.daan-conten_item {
				display: flex;
				align-items: center;
				border-radius: 3px;
				// margin-top: 10px;
				padding-left: 5px;
				box-sizing: border-box;
				padding: 10px 0;
				border-bottom: 1px solid #fff;
				.cdata-index {
					box-sizing: border-box;
					flex-shrink: 0;
					align-self: flex-start;
					margin-right: 8px;
					// border: 1px #aaa solid;
					border-radius: 50%;
					width: 20px;
					height: 18px;
					display: flex;
					align-items: center;
					justify-content: center;
					.data-cengnas{
					}
				}
			}
		}
	}
	.activeItemre{
		color:rgba(0, 170, 0, 1.0);
	}
	.activeItemwa{
		color:rgba(255, 0, 0, 1);
	}
</style>
